<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <base href="<%=basePath%>">
  <meta charset="utf-8">
  <title>材料查询</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="layuiadmin/style/admin.css" media="all">
  <style type="text/css">
.layui-table-cell .layui-form-radio {
	position: relative;
	top: 50%;
}

    .text-warm{ color: coral}
    .text-danger{color: red}
    .text-error{color: brown}
</style>
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">材料编号</label>
            <div class="layui-input-inline">
              <input type="text" name="materialcode" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">材料名称</label>
            <div class="layui-input-inline">
              <input type="text" name="materialname" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">库存状态</label>
            <div class="layui-input-inline">
              <select name="depotstatus">
              	<option value="">请选择</option>
                <option value="有库存">有库存</option>
                <option value="无库存">无库存</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-materialdepot-contlist-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
       
        <table id="LAY-materialdepot-content-list" lay-filter="LAY-materialdepot-content-list"></table> 
        
        <script type="text/html" id="toolbarDemo">
  			<div class="layui-btn-container">
    			<button class="layui-btn layuiadmin-btn-list" lay-event="indepot">材料入库</button>
                <!--
					<button class="layui-btn layuiadmin-btn-list" lay-event="addDepotout">材料出库</button>
					<button class="layui-btn layuiadmin-btn-list" lay-event="updateDepotamount">同批次入库</button>
				-->
  			</div>
		</script>
        <script type="text/html" id="table-content-list">
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
      </div>
    </div>
  </div>

  <script src="layuiadmin/layui/layui.js"></script> 
  <script src="layuiadmin/js/form.js"></script>
  <script>
  layui.config({
    base: 'layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'contlist', 'table', 'laydate'], function(){
    var table = layui.table
    ,admin = layui.admin
    ,laydate = layui.laydate
    ,form = layui.form;
    
    laydate.render({
		elem: '#date', //弹出页的指定元素生日时期需要为时间格式
	});
    
    table.render({
        elem: '#LAY-materialdepot-content-list'
        ,url:'materialdepot/findListJson/'
        ,toolbar: '#toolbarDemo'
        ,cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,toolbar: '#toolbarDemo'
        ,cols: [[
           {type:'radio'}    
		  ,{field:'materialcode', title: '材料编号', sort: true}
          ,{field:'materialname', title: '材料名称', sort: true}

          ,{field:'depotamount', title: '库存量', sort: true}
          ,{field:'depotrackcode', title: '存入货柜位置', sort: true}
          ,{
          templet: function (d) {
            if(d.depotamount>=d.alarmdepotamount){
              return  '正常';
            }else if(d.depotamount<d.alarmdepotamount && d.depotamount>0){
              return  '<span class="text-warm">预警</span>';
            }else{
              return  '<span class="text-danger">异常</span>';
            }
          },

          title: '库存状态',
          width: 180,
          align: 'left',
        },

        ]]
    	,page: true
      });
    
    //监听搜索
    form.on('submit(LAY-materialdepot-contlist-search)', function(data){
      var field = data.field;
      //执行重载
      table.reload('LAY-materialdepot-content-list', {
        where: field
        ,page: {
            curr: 1 //重新从第 1 页开始
        }
      });
    });
    
    //监听表格事件
    table.on('tool(LAY-materialdepot-content-list)', function(obj){
      var data = obj.data;
      if(obj.event === 'detail'){
        layer.msg('ID：'+ data.id + ' 的查看操作');
      } else if(obj.event === 'del'){
        layer.confirm('确定删除 '+data.materialcode + '?', function(index){
        	//关闭网页
        	layer.close(index);
        	admin.req({
        		url: 'materialdepot/delete' //实际使用请改成服务端真实接口
       	        ,data: data
       	        ,done: function(res){
       	         	if(res.flag==1){
       	         		layer.msg('删除成功');
       			  	}else{
       			  		layer.msg('删除失败');
       			  	}
       	         	table.reload('LAY-materialdepot-content-list');
       	         }
             });
        });
      } else if(obj.event === 'edit'){
    	  layer.open({
              type: 2
              ,title: '修改材料'
              ,content: 'materialdepot/updateInit?id='+data.id
              ,maxmin: true
              ,area: ['900px', '500px']
              ,btn: ['确定', '取消']
              ,yes: function(index, layero){
                //点击确认触发 iframe 内容中的按钮提交
                var submit = layero.find('iframe').contents().find("#layuiadmin-materialdepot-form-submit");
                submit.click();
              }
	          ,end: function () {
	          	table.reload('LAY-materialdepot-content-list');
	          }
            });
      }
    });
    
    //头工具栏事件
    table.on('toolbar(LAY-materialdepot-content-list)', function(obj){
      
      switch(obj.event){
        case 'batchdel': //批量删除
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            
            if(data.length === 0){
                return layer.msg('请选择数据');
            }
	        layer.confirm('确定批量删除选中项 ?', function(index){
	          	admin.req({
	          		    url: 'materialdepot/deleteBatch' //实际使用请改成服务端真实接口
	         	        ,data: JSON.stringify(data)
	         	        ,type: 'POST'
	         	        ,contentType: "application/json;charset-UTF-8"
	         	        ,done: function(res){
	         	         	if(res.flag==1){
	         	         		layer.msg('删除成功');
	         			  	}else{
	         			  		layer.msg('删除失败');
	         			  	}
	         	         	//关闭网页
	        	          	layer.close(index);
	         	         	table.reload('LAY-materialdepot-content-list');
	         	         }
	               });
	        });
        break;
        case 'indepot':  //新批次入库
        	layer.open({
                type: 2
                ,title: '材料入库'
                ,content: 'materialdepot/indepot'
                ,maxmin: true
                ,area: ['900px', '500px']
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                  //点击确认触发 iframe 内容中的按钮提交
                  var submit = layero.find('iframe').contents().find("#layuiadmin-materialdepot-form-submit");
                  submit.click();
                }
	        	,end: function () {
	        		table.reload('LAY-materialdepot-content-list');
	            }
              });
        	 break;
        case 'addDepotout':  //材料出库
        	var checkStatus = table.checkStatus(obj.config.id);
		    var data = checkStatus.data;
            
            if(data.length === 0){
                return layer.msg('请选择数据');
            } 
        	layer.open({
                type: 2
                ,title: '材料出库'
                ,content: 'materialdepot/outdepot?batchno='+data[0].batchno
                ,maxmin: true
                ,area: ['900px', '550px']
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                  //点击确认触发 iframe 内容中的按钮提交
                  var submit = layero.find('iframe').contents().find("#layuiadmin-materialdepot-form-submit");
                  submit.click();
                }
	        	,end: function () {
	        		table.reload('LAY-materialdepot-content-list');
	            }
              });
        break;
        case 'updateDepotamount':  //同批次入库
        	var checkStatus = table.checkStatus(obj.config.id);
		    var data = checkStatus.data;
            
            if(data.length === 0){
                return layer.msg('请选择数据');
            } 
        	layer.open({
                type: 2
                ,title: '同批次入库'
                ,content: 'materialdepot/updateDepotamountInit?batchno='+data[0].batchno
                ,maxmin: true
                ,area: ['900px', '550px']
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                  //点击确认触发 iframe 内容中的按钮提交
                  var submit = layero.find('iframe').contents().find("#layuiadmin-materialdepot-form-submit");
                  submit.click();
                }
	        	,end: function () {
	        		table.reload('LAY-materialdepot-content-list');
	            }
              });
        break;
      };
    });
  });
 
  
  </script>
</body>
</html>